<div class="flex flex-col items-center justify-center min-h-96 py-12">
    {# Modern Empty State Container #}
    <div class="text-center max-w-md mx-auto">
        {# Animated Icon #}
        <div class="relative mb-8">
            <div class="w-24 h-24 mx-auto bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-2xl animate-pulse">
                <i class="fa-solid fa-tools text-white text-3xl"></i>
            </div>
            <div class="absolute -top-2 -right-2 w-8 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg">
                <i class="fa-solid fa-hammer text-white text-sm"></i>
            </div>
        </div>
        
        {# Brand Logo #}
        <div class="mb-6">
            <div class="text-3xl font-extrabold text-gray-900 dark:text-white md:text-4xl">
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">Django</span>
                <i class="fa-brands fa-python text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-red-600 mx-2"></i>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">Starter</span>
            </div>
        </div>
        
        {# Status Message #}
        <div class="mb-8">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ title }}</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
                我们正在努力开发这个功能，敬请期待！<br>
                <span class="text-sm">预计很快就会与大家见面 🚀</span>
            </p>
        </div>
        
        {# Progress Indicator #}
        <div class="mb-8">
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
                <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full animate-pulse" style="width: 65%"></div>
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">开发进度: 65%</p>
        </div>
        
        {# Action Buttons #}
        <div class="flex flex-col sm:flex-row gap-3 justify-center">
            <a href="{% url 'djs_guide:index' %}"
               class="group inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                <i class="fa-solid fa-house-chimney group-hover:scale-110 transition-transform duration-200"></i>
                <span>返回主页</span>
            </a>
            
            <a href="{% url 'account:index' %}"
               class="group inline-flex items-center justify-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold rounded-xl border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200 shadow-md hover:shadow-lg">
                <i class="fa-solid fa-circle-user group-hover:scale-110 transition-transform duration-200"></i>
                <span>个人中心</span>
            </a>
        </div>
        
        {# Additional Info #}
        <div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
            <div class="flex items-center justify-center gap-2 text-sm text-blue-700 dark:text-blue-400">
                <i class="fa-solid fa-info-circle"></i>
                <span>有任何建议或问题？欢迎联系我们的开发团队</span>
            </div>
        </div>
    </div>
</div>